<template>
    <div>
        <el-form :model="ruleForm" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <div>
                <div class="container" style="margin-top:20px">
                    <h3 style="margin-bottom: 20px">{{ruleForm.breedName}}</h3>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="召回范围：">
                                {{ruleForm.link}}
                            </el-form-item>
                            <el-form-item label="召回日期：">
                                {{ruleForm.time}}
                            </el-form-item>
                            <el-form-item label="召回人：">
                                {{ruleForm.recallUser}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="批号：">
                                {{ruleForm.batch}}
                            </el-form-item>
                            <el-form-item label="名称：">
                                {{ruleForm.breedName}}
                            </el-form-item>
                            <el-form-item label="操作人：">
                                {{ruleForm.userName}}
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <div class="container" style="margin-top:20px">
                    <el-row>
                        <el-col :span="24">
                            <h3>召回原因</h3>
                            <div style="line-height: 24px; margin-top:20px; border: 1px solid #eee; padding:10px; font-size: 14px" v-html="ruleForm.reason"></div>
                        </el-col>
                    </el-row>
                </div>
                <div class="container" style="margin-top:20px">
                    <el-row>
                        <el-col :span="24">
                            <h3>产品流向</h3>
                            <div>
                                <el-tabs v-model="activeName">
                                    <el-tab-pane label="原料入库" name="原料入库">
                                        <el-table
                                            :data="tableData1"
                                            border
                                            ref="multipleTable"
                                            header-cell-class-name="table-header"
                                        >
                                            <el-table-column prop="breedName" sortable label="名称"></el-table-column>
                                            <el-table-column prop="inType" sortable label="入库类型"></el-table-column>
                                            <el-table-column prop="inBatch" sortable label="进厂编号"></el-table-column>
                                            <el-table-column prop="totalNum" sortable label="入库数量">
                                                <template slot-scope="scope">
                                                    {{scope.row.totalNum}}{{scope.row.units}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="surplusNum" sortable label="剩余数量">
                                                <template slot-scope="scope">
                                                    {{scope.row.surplusNum}}{{scope.row.units}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="lossNum" sortable label="报损数量">
                                                <template slot-scope="scope">
                                                    {{scope.row.lossNum}}{{scope.row.units}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="操作" width="150" align="center">
                                                <template slot-scope="scope">
                                                    <el-button
                                                        type="text"
                                                        @click="handleView1(scope.$index, scope.row)"
                                                    >查看</el-button>
                                                    <el-button
                                                        v-if="scope.row.isRecall == 1"
                                                        type="info"
                                                        disabled
                                                    >已召回</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </el-tab-pane>
                                    <el-tab-pane label="生产管理" name="生产管理">
                                        <el-table
                                            :data="tableData2"
                                            border
                                            ref="multipleTable"
                                            header-cell-class-name="table-header"
                                        >
                                            <el-table-column prop="breedName" sortable label="名称"></el-table-column>
                                            <el-table-column prop="batch" sortable label="生产批号"></el-table-column>
                                            <el-table-column prop="time" sortable label="生产日期"></el-table-column>
                                            <el-table-column prop="totalNumber" sortable label="生产数量">
                                                <template slot-scope="scope">
                                                    {{scope.row.totalNumber}}{{scope.row.units}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="surplusNumber" sortable label="剩余量">
                                                <template slot-scope="scope">
                                                    {{scope.row.surplusNumber}}{{scope.row.units}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="操作" width="150" align="center">
                                                <template slot-scope="scope">
                                                    <el-button
                                                        type="text"
                                                        @click="handleView2(scope.$index, scope.row)"
                                                    >查看</el-button>
                                                    <el-button
                                                        v-if="scope.row.isRecall == 1"
                                                        type="info"
                                                        disabled
                                                    >已召回</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </el-tab-pane>
                                    <el-tab-pane label="颗粒包装" name="颗粒包装">
                                        <el-table
                                            :data="tableData3"
                                            border
                                            ref="multipleTable"
                                            header-cell-class-name="table-header"
                                        >
                                            <el-table-column prop="breedName" sortable label="名称"></el-table-column>
                                            <el-table-column prop="batch" sortable label="生产批号"></el-table-column>
                                            <el-table-column prop="time" sortable label="生产日期"></el-table-column>
                                            <el-table-column prop="scUseNum" sortable label="投料量">
                                                <template slot-scope="scope">
                                                    {{scope.row.scUseNum}}{{scope.row.scUseNumUnits}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="totalNumber" sortable label="实际产量">
                                                <template slot-scope="scope">
                                                    <span v-if="scope.row.totalNumber == ''"></span>
                                                    <span v-else>
                                                        {{scope.row.totalNumber}}{{scope.row.units}}
                                                    </span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="操作" width="150" align="center">
                                                <template slot-scope="scope">
                                                    <el-button
                                                        type="text"
                                                        @click="handleView3(scope.$index, scope.row)"
                                                    >查看</el-button>
                                                    <el-button
                                                        v-if="scope.row.isRecall == 1"
                                                        type="info"
                                                        disabled
                                                    >已召回</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <el-form-item class="footerFixed">
                    <el-button @click="backPage">返回</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>
</template>

<script>
import {recall_findById} from "@/request/api";
    export default {
        data() {
            return {
                ruleForm: {},
                tableData1: [],
                tableData2: [],
                tableData3: [],
                activeName: '原料入库',
                materialType: '原料入库',
            };
        },
        mounted(){
            this.id = this.$route.query.id
            this.init();
        },
        methods: {
            backPage () {
                this.$router.go(-1);
            },
            // 调用接口
            init(){
                recall_findById(this.id).then((res)=>{
                    this.ruleForm = res.data
                    this.tableData1 = res.data.materialList
                    this.tableData2 = res.data.manufactureList
                    this.tableData3 = res.data.particlePackingList
                })
            },
            // tabs
            // handleClick(tab, event) {
            //     this.materialType = tab.label
            //     if (this.materialType == '原料入库') {
            //         this.init1()
            //     } else if(this.materialType == '生产管理') {
            //         this.init2()
            //     } else if(this.materialType == '颗粒包装'){
            //         this.init3()
            //     }
            // },
            handleView1(index,row){
                this.$router.push({
                    path: '/materialCheck/viewMaterialCheck',
                    query: { id: row.id }
                });
            },
            handleView2(index,row){
                this.$router.push({
                    path: '/production/viewProduction',
                    query: { id: row.id }
                });
            },
            handleView3(index,row){
                this.$router.push({
                    path: '/packing/viewPacking',
                    query: { id: row.id }
                });
            },
        }
    }
</script>

<style scoped>
.el-pagination{
    text-align: center;
}
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.el-input--small .el-input__inner{
    border-radius: 5px 0 0 5px !important;
    border-right: none;
}
</style>